<template>
  <view>
    <view class="bg-white u-p-24">
      <view class="good" v-for="i in 3" :key="i">
        <u-avatar src="https://picsum.photos/id/602/200/200" size="80" mode="square"></u-avatar>
        <view class="info u-font-24">
          <view class="name text-cut">美特斯邦威夹克</view>
          <view class="sub u-m-t-12 u-m-b-16">L码;绿色</view>
          <view class="flex-row">
            <text class="u-m-r-16">整体评价</text>
            <u-rate :count="5" v-model="value" active-color="#ffb849"></u-rate>
            <text class="u-m-l-16">非常好</text>
          </view>
        </view>
      </view>

      <view class="texta">
        <textarea class="ipt" name="" id="" cols="30" rows="10" placeholder="宝贝满足你的期待吗?说说他的优点和美中不足的地方吧!"></textarea>
      </view>
    </view>

    <view class="u-p-24">
      <my-btn :size="[680, 80, 30]" color="#fff" bg="#FFB849" round>确认提交</my-btn>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: 4
      };
    }
  }
</script>

<style lang="scss">
  .good {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;

    .info {
      width: 600rpx;
      color: #B8B8B8;
    }

    .name {
      color: #000;
    }
  }

  .texta {
    width: 702rpx;
    height: 400rpx;
    background: #F2F2F2;
    border-radius: 8rpx;
    padding: 24rpx;

    .ipt {
      width: 100%;
      height: 260rpx;
      font-size: 26rpx;
      letter-spacing: 1px;
      line-height: 1.8;
    }
  }
</style>
